<script >
import Time from '../component/time.vue'
import { type1 } from '../assets/publicOption'
import { type2 } from '../assets/publicOption'
import * as echarts from 'echarts'
export default {
    components: { Time },
    data() {
        return {
            chart10: '', //保存init过的chart10
            formInline: {},
            formInline: {
                region: '', // 绑定选择位置的数据
                region2: '' // 绑定选择指标的数据
            },
            regionOptions: [
                { label: '水一区', value: 'shuiyiqu' },
                { label: '水二区', value: 'shuierqu' }
            ],
            indicatorOptions: [
                { label: '调储罐进口', value: 'tiaojinkou' },
                { label: '调储罐出口', value: 'tiaochukou' },
                { label: '反应罐出口', value: 'fanchukou' },
                { label: '二级出口', value: 'erchukou' }
                // 可以根据 region 的值动态设置 indicatorOptions
            ],
            // echarts的数据
            // #region
            option1: { ...this.$store.state.station1.yOption1Data, ...type1 },
            option2: { ...this.$store.state.station1.yOption2Data, ...type1 },
            option3: { ...this.$store.state.station1.yOption3Data, ...type1 },
            option4: { ...this.$store.state.station1.option4Data },
            option5: { ...this.$store.state.station1.SOption5Data, ...type1 },
            option6: { ...this.$store.state.station1.SOption6Data, ...type1 },
            option7: { ...this.$store.state.station1.SOption7Data, ...type1 },
            option8: { ...this.$store.state.station1.wOption8Data, ...type1 },
            option9: { ...this.$store.state.station1.wOption9Data, ...type1 },
            option10: { ...this.$store.state.station1.wOption10Data, ...type2 },
            option11: {
                ...this.$store.state.station1.wOption11Data,
                ...type1
            },
            option12: {
                ...this.$store.state.station1.wOption12Data,
                ...type1
            },
            option13: { ...this.$store.state.station1.fOption13Data, ...type1 },
            option14: { ...this.$store.state.station1.fOption14Data, ...type1 },
            option15: { ...this.$store.state.station1.lOption15Data, ...type1 },
            option16: { ...this.$store.state.station1.lOption16Data, ...type1 },
            option17: { ...this.$store.state.station1.lOption17Data, ...type1 },
            option18: { ...this.$store.state.station1.lOption18Data, ...type1 },
            option19: { ...this.$store.state.station1.lOption19Data, ...type1 },

            //   #endregion
            options: [
                this.option1,
                this.option2,
                this.option3,
                this.option4,
                this.option5,
                this.option6,
                this.option7,
                this.option8,
                this.option9,
                this.option10,
                this.option11,
                this.option12,
                this.option13,
                this.option14,
                this.option15,
                this.option16,
                this.option17,
                this.option18,
                this.option19
            ]
        }
    },
    watch: {
        'formInline.region2': function (newVal, oldVal) {
            console.log('选择的位置:', this.formInline.region)
            console.log('选择的指标:', newVal)
            // let chart10DOM = document.querySelector('.chart10')
            // let chart10 = echarts.init(chart10DOM)
            let option = null
            // console.log(chart10)
            // 水一区
            if (
                this.formInline.region == 'shuiyiqu' ||
                !this.formInline.region
            ) {
                // 调储罐进口
                if (newVal == 'tiaojinkou') {
                    option = this.$store.state.station1.wOption10Data
                } else if (newVal == 'tiaochukou') {
                    // 调储罐出口
                    option = this.$store.state.station1.option10Data1
                }
                // 反应罐出口
                else if (newVal == 'fanchukou') {
                    option = this.$store.state.station1.option10Data2
                }
                // 二级出口
                else if (newVal == 'erchukou') {
                    option = this.$store.state.station1.option10Data3
                }
            } else {
                // 调储罐进口
                if (newVal == 'tiaojinkou') {
                    option = this.$store.state.station1.option10Data4
                } else if (newVal == 'tiaochukou') {
                    // 调储罐出口
                    option = this.$store.state.station1.option10Data5
                }
                // 反应罐出口
                else if (newVal == 'fanchukou') {
                    option = this.$store.state.station1.option10Data6
                }
                // 二级出口
                else if (newVal == 'erchukou') {
                    option = this.$store.state.station1.option10Data7
                }
            }
            console.log(this.chart10)
            option = { ...option, ...type2 }

            this.chart10.setOption(option)
        }
    },

    methods: {
        initChart() {
            // 使用 for 循环遍历数组
            // let itemCharts = []
            for (let i = 0; i < this.options.length; i++) {
                // 构造 DOM 元素的 ID
                const chartDomClass = `chart${i + 1}`
                // console.log(chartDomClass);
                // // 获取 DOM 元素
                const chartItemDom = document.querySelector('.' + chartDomClass)

                // 给各个表格加宽度和高度
                chartItemDom.style.width = '100%'
                chartItemDom.style.height = '100%'
                // console.log(chartItemDom)

                // console.log(this.options);

                // 初始化 ECharts 实例
                const itemChart = echarts.init(chartItemDom)
                // itemCharts.push(itemChart)
                // 设置配置项
                if (i == 9) {
                    this.chart10 = itemChart
                }
                itemChart.setOption(this.options[i], true)
                window.addEventListener('resize', function () {
                    itemChart.resize()
                })
            }
        }
    },
    mounted() {
        this.$store.dispatch('station1/askData')
        // 注意：由于 Vue 的响应式系统，直接在 data 函数中引用 this.optionX 可能会导致问题
        // 因此，你可能需要在 mounted 钩子中重新构建 options 数组
        this.options = [
            this.option1,
            this.option2,
            this.option3,
            this.option4,
            this.option5,
            this.option6,
            this.option7,
            this.option8,
            this.option9,
            this.option10,
            this.option11,
            this.option12,
            this.option13,
            this.option14,
            this.option15,
            this.option16,
            this.option17,
            this.option18,
            this.option19
        ]
        // 基于准备好的dom，初始化echarts实例
        setTimeout(() => {
            this.initChart()
        }, 100)
    }
}
</script>

<template>
    <div class="container">
        <div class="title-container">
            一号稠油处理站
            <!-- 时间表 -->
            <p class="time"><Time /></p>
            <img
                class="title-img"
                style="height: 70px; width: 100%"
                src="../../../assets/imgs/head1.png"
            />
        </div>
        <div class="bottom">
            <!-- 原油处理 -->
            <div class="crude-charging">
                <!-- 上部分 -->
                <div class="title">原油处理</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item">
                        <div class="chart1" />
                    </div>
                    <div class="chart-item">
                        <div class="chart2" />
                    </div>
                    <div class="chart-item">
                        <div class="chart3" />
                    </div>
                    <div class="chart-item">
                        <div class="chart4" />
                    </div>
                    <div class="chart-item"></div>
                    <div class="chart-item"></div>
                </div>
            </div>

            <!-- SAGD -->
            <div class="SAGD">
                <!-- 上部分 -->
                <div class="title">SAGD密闭处理站</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart5" /></div>
                    <div class="chart-item"><div class="chart6" /></div>
                    <div class="chart-item"><div class="chart7" /></div>
                </div>
            </div>

            <!-- 污水处理 -->
            <div class="sewage-treatment">
                <!-- 上部分 -->
                <div class="title">污水处理</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart8" /></div>
                    <div class="chart-item"><div class="chart9" /></div>
                    <div class="chart-item">
                        <el-form
                            :inline="true"
                            :model="formInline"
                            class="form"
                            size="mini"
                        >
                            <el-form-item
                                label="选择区域"
                                style="color: aliceblue"
                            >
                                <el-select
                                    style="width: 100px"
                                    v-model="formInline.region"
                                    placeholder="选择区域"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in regionOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="选择位置">
                                <el-select
                                    clearable
                                    style="width: 100px"
                                    v-model="formInline.region2"
                                    placeholder="选择位置"
                                >
                                    <el-option
                                        v-for="item in indicatorOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div class="chart10" ref="chart" />
                    </div>
                    <div class="chart-item"><div class="chart11" /></div>
                    <div class="chart-item"><div class="chart12" /></div>
                    <div class="chart-item" />
                </div>
            </div>

            <!-- 辅助系统 -->
            <div class="auxiliary-system">
                <!-- 上部分 -->
                <div class="title">辅助系统</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart13" /></div>
                    <div class="chart-item"><div class="chart14" /></div>
                    <div class="chart-item" />
                </div>
            </div>

            <!-- 冷凝水处理 -->
            <div class="condensate-treatment">
                <!-- 上部分 -->
                <div class="title">冷凝水处理</div>
                <!-- 下部分 -->
                <div class="chart">
                    <div class="chart-item"><div class="chart15" /></div>
                    <div class="chart-item"><div class="chart16" /></div>
                    <div class="chart-item"><div class="chart17" /></div>
                    <div class="chart-item"><div class="chart18" /></div>
                    <div class="chart-item"><div class="chart19" /></div>
                    <div class="chart-item" />
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.test {
    background-color: #05b2d1;
    font-size: 50px;
}
.container {
    width: 100%;
    height: 120%;
    background-color: #02104f;
    border: 1px solid #797979;
}
.title-container {
    height: 80px;
    position: relative;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
    color: white;
    border-bottom: solid 2px #293e83;
    .time {
        font-size: 15px;
        position: absolute;
        right: 5%;
        top: 0;
        font-weight: normal;
    }
}

.title-img {
    position: absolute;
    top: 0;
    left: 0;
}

.bottom {
    background-color: #202033;
}
/* 原油处理 */
/* 05B2D1 */
.crude-charging {
    border-bottom: solid 2px #05b2d1;
    .title {
        padding-left: 20px;
        color: #05b2d1;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #05b2d1;
    }
}

//   chart样式
.chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    .chart-item {
        height: 450px;
        width: 33%;
        background-color: #0b1539;
        // border: 2px solid #33a2f8;
    }
}

// SAGD
.SAGD {
    border-bottom: solid 2px #75f9fd;
    .title {
        padding-left: 20px;
        color: #75f9fd;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #75f9fd;
    }
}
.sewage-treatment {
    border-bottom: solid 2px #6cff16;
    .title {
        padding-left: 20px;
        color: #6cff16;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #6cff16;
    }
}
.auxiliary-system {
    border-bottom: solid 2px #f2bd42;
    .title {
        padding-left: 20px;
        color: #f2bd42;
        font-size: 36px;
        height: 80px;
        line-height: 80px;
        background-color: #04051a;
        border-bottom: solid 2px #f2bd42;
    }
}

// 冷凝水
.condensate-treatment .title {
    border-bottom: solid 2px #42f2e9;
    padding-left: 20px;
    color: #42f2e9;
    font-size: 36px;
    height: 80px;
    line-height: 80px;
    background-color: #04051a;
    border-bottom: solid 2px #42f2e9;
}

::v-deep .el-form {
    margin-top: 20px;
    height: 30px;
}

::v-deep .el-form-item:first-child {
    margin-right: 30px;
}
::v-deep .el-form-item__label {
    color: #fff;
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 10px;
    // margin-right: 10px;
}
::v-deep .el-input__inner {
    background-color: transparent !important;
    border: 0.5px solid #3f8fa5;
    color: white;
}
</style>
